<template>
  <a-card>
    <!--  @changeValue="onChangeValue" 同等与 inputConfig/numberConfig等...的onChange  -->
    <!-- :is=false，需要使用a-form标签包裹，套用多个v-table -->
    <a-form ref="tableRef" :model="formParam" v-bind="formItemLayout">
      <!-- form -->
      <v-form :form="form" :formParam="formParam" :inline="false">
        <template #customize="{ title, key, width }">
          <a-input
            :style="{ width: width }"
            v-model="formParam[key]"
            :placeholder="`请输入${title}`"
            clearable
          />
        </template>
      </v-form>
      <!-- table -->
      <v-table
        label="列表"
        :is="false"
        :scroll="{ x: 'max-content' }"
        :keys="keys"
        :apiFn="tableList"
        :columns="columns"
        :formParam="formParam"
        :formConfig="{
          ...formItemLayout,
        }"
        :optionConfig="{ selectOptions, treeOptions }"
        :disabledConfig="{ name: userId, ages: !(userId == 1) }"
        :inputConfig="{ onChange }"
        :selectConfig="{ select: onChange }"
        :inline="false"
        :pagination="false"
        @changeValue="onChangeValue"
      >
        <!-- 添加行 -->
        <template #title>
          <div class="but">
            <a-button type="primary" size="small" ghost @click="onAction(true)">
              <plus-square-outlined />
              添加
            </a-button>
          </div>
        </template>
        <!-- table -->
        <template #default="{ column, index }">
          <template v-if="column.dataIndex === 'annex'">
            <a type="link">附件</a>
          </template>
          <template v-if="column.dataIndex === 'operate'">
            <a-popconfirm
              title="确认删除此项吗？"
              @confirm="onAction(false, index)"
            >
              <a-button type="link" danger style="padding: 0"> 删除 </a-button>
            </a-popconfirm>
          </template>
        </template>
      </v-table>
    </a-form>
    <div class="but" style="margin-top: 16px">
      <a-space>
        <a-button @click="tableRef.resetFields()">清空</a-button>
        <a-button type="primary" @click="onSubmit">确定</a-button>
      </a-space>
    </div>
  </a-card>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { message } from "ant-design-vue";
import { form, columns, formItemLayout } from "./config/index";
import { tableList } from "@/api";

// ref
const tableRef = ref(null);

const keys = "dataSource"; // 列表Keys
const formParam = ref({});
// 模拟数据
const userId = 1;
const selectOptions = ref([
  { id: 1, name: "天河区" },
  { id: 2, name: "白云区" },
]);
const treeOptions = ref([
  {
    id: "1",
    name: "第一层001",
    children: [
      {
        id: "11",
        name: "第一层001-第二层001",
      },
    ],
  },
  {
    id: "2",
    name: "第一层002",
  },
]);

// 添加删除/行
const onAction = (status, i) => {
  if (!formParam.value[keys]) {
    formParam.value[keys] = [];
  }
  // i：删除索引
  if (status) {
    // 添加
    formParam.value[keys].push({});
    return;
  }
  formParam.value[keys].splice(i, 1);
};

const onChange = (data) => {
  console.log(data, "onChange");
};

// table监听集合
const onChangeValue = (data) => {
  console.log(data, "onChangeValue");
  switch (data.type) {
    case "tree":
      //
      break;
    case "select":
      //
      break;
    case "date":
      //
      break;
  }
};

// 确认
const onSubmit = () => {
  console.log(formParam.value, "onSubmit");
  tableRef.value
    .validate()
    .then(() => {
      // 接口
    })
    .catch(() => {
      message.warning("请填写必填项！");
    });
};
</script>

<style scoped>
.but {
  display: flex;
  justify-content: flex-end;
}
</style>
